<template>
    <h2 align="center">批量调整</h2>
    <table  border="1" align="center">
        <thead>
            <tr>
                <td>房型</td>
                <td>
                    <select v-model="state.roomTypeId">
                        <option value="">请选择</option>
                        <option :value="item.id" v-for="item in roomtypelist">{{item.roomTypeName  }}</option>
                    </select>
                </td>
            </tr>
            <tr>
                <td>房态</td>
                <td><select v-model="state.houseStateId">
                        <option value="">请选择</option>
                        <option :value="item.id" v-for="item in statelist">{{ item.houseStateName }}</option>
                    </select></td>
            </tr>
            <tr>
                <td>开始时间</td>
                <td>
                    <input type="date" v-model="state.startTime">
                </td>
            </tr>
            <tr>
                <td>结束时间</td>
                <td><input type="date" v-model="state.endTime"></td>
            </tr>
            <tr>
                <td></td>
                <td>
                    <input type="button" value="批量调整" @click="tiaozheng">
                </td>
            </tr>
        </thead>
    </table>
    <div style="height:500px;width:1000px">
        <wang-calendar v-model="date" :events="events" />
        <WangScrollbar :height?="500" :width?="500">
            <!-- 你的内容 -->
        </WangScrollbar>
        </div>
</template>

<script setup lang="ts">
import {reactive,toRefs,onMounted} from 'vue';
import axios from 'axios';
import {WangCalendar,WangScrollbar} from 'wang-calendar'
import 'wang-calendar/style.css'


const data = reactive({
    date:new Date(),
    events:[{id:1,sdate:'2024-07-08',edate:'2024-08-10',title:'空闲房'}],
    state:{
  "roomTypeId":'',
  "houseStateId":'',
  "startTime": "",
  "endTime": "",
  "isDeleted": false
    },
    roomtypelist:[],
    statelist:[]
})

const {state,roomtypelist,statelist,events,date} = toRefs(data)

onMounted(()=>{
    roomdata();
    statedata();
})

const roomdata=()=>{
    axios({
        url:'/api/Room/SelRoomType',
        method:'get',
    })
    .then(res=>{
        console.log(res)
        roomtypelist.value = res.data
    })
    .catch(err=>{
        console.log(err)
    })
}

const statedata=()=>{
    axios({
        url:'/api/Room/HouseRoom',
        method:'get',
    })
    .then(res=>{
        console.log(res)
        statelist.value = res.data
    })
    .catch(err=>{
        console.log(err)
    })
}

const tiaozheng=()=>{
    if(state.value.roomTypeId=='')
    {
        alert('房型类型不能为空');
        return;
    }
    if(state.value.houseStateId=='')
    {
        alert('房态类型不能为空');
        return;
    }
    if(state.value.startTime=='')
    {
        alert('开始时间不能为空');
        return;
    }
    if(state.value.endTime=='')
    {
        alert('结束时间不能为空');
        return;
    }
    axios({
        url:'/api/Room/AddPiliang',
        method:'post',
        data:state.value
    })
    .then(res=>{
        console.log(res)
        if(res.data.data==1)
        {
            alert('调整成功')
            //调整成功改变events的值
            events.value[0]={
                id:1,sdate:state.value.startTime,edate:state.value.endTime,title:state.value.roomTypeId+","+state.value.houseStateId
            }
        }
        else{
            alert('调整失败')
            return;
        }
        
    })
    .catch(err=>{
        console.log(err)
    })
}


</script>